<template>
<div class="bind_card">
  <div class="bind_card_submit">
    <el-form ref="bindForm" :rules="bindFormRules" :model="bindForm" label-position="left" label-width="100px">
      <el-form-item label="银行卡号" prop="bankCardNumber">
        <el-input placeholder="请输入银行卡账号"
            v-model="bindForm.bankCardNumber"
            type="text"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="所属银行" prop="bank">
        <el-select v-model="bindForm.bank" placeholder="请选择所属银行">
          <el-option v-for="(item,i) in bankList" :key="i" :label="item.bank" :value="item.bank"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="银行卡密码" prop="payPassword">
        <el-input type="password" v-model="bindForm.payPassword" placeholder="请输入银行卡密码"></el-input>
      </el-form-item>
      <el-form-item style="text-align: center">
        <el-button type="primary" @click="bindingCard">绑定银行卡</el-button>
      </el-form-item>
    </el-form>
  </div>

  <div class="bind_card_list">
    <h3 style="color: #3894ff">已绑定的银行卡</h3>
    <el-table :data="bindBankList" empty-text="您暂时没有绑定银行卡">
      <el-table-column prop="id" label="Id" v-if="false"></el-table-column>
      <el-table-column prop="bankCardNumber" label="银行卡号"></el-table-column>
      <el-table-column prop="bank" label="所属银行"></el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="120">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="danger"
              @click="unbinding(scope.$index, scope.row)">解绑</el-button>
        </template>
      </el-table-column>

    </el-table>
  </div>
</div>
</template>

<script>
import {bindBandCard, findIsBindingCard, unbindingCard} from "@/api/bindding";

export default {
  name: "index",
  data(){
    return{
      bindForm:{
        //关系id
        id:"",
        bankCardNumber:"",
        bank:"",
        userId:"",
        payPassword:""
      },
      bankList:[
        {bank:"中国农业银行"},
        {bank:"中国工商银行"},
        {bank:"中国建设银行"},
        {bank:"中国银行"},
        {bank:"交通银行"},
        {bank:"中国邮政储蓄银行"},
      ],
      bindFormRules:{
        bankCardNumber: [
          {required: true, trigger: "blur", message: "请输入您的银行卡号"}
        ],
        bank:[
          { required: true, message: '请选择所属银行', trigger: 'change' }
        ],
        payPassword:[
          { required: true, message: '请选择所属银行', trigger: 'change' }
        ]
      },
      bindBankList:[

      ]
    }
  },
  created() {
    this.findBindCardList();
  },
  methods:{
    //绑定银行卡
    bindingCard(){
      this.$refs.bindForm.validate(valid=>{
        if(valid){
          this.$alert('<p>请确认银行卡号是否填写正确</p>' +
              '<p>银行卡号：'+this.bindForm.bankCardNumber+'</p>' +
              '<p>所属银行：'+this.bindForm.bank+'</p>','绑定银行卡',{
            dangerouslyUseHTMLString: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(()=>{
            const req = {
              id:this.$store.state.user.userInfo.userId,
              bankCardNumber:this.bindForm.bankCardNumber,
              bank:this.bindForm.bank,
              payPassword: this.bindForm.payPassword
            }
            bindBandCard(req).then(res=>{
              this.$message({
                message: res.content,
                type: 'success'
              })
              // this.$router.push('binding');
              location.reload();
            })
          }).catch(()=>{
            this.$message({
              type: 'info',
              message: '取消提交'
            });
          });

        }
      })
    },
    //查询已绑定的银行卡
    findBindCardList(){
      const userId = this.$store.state.user.userInfo.userId;
      findIsBindingCard(userId).then(res=>{
        console.log(res);
        this.bindBankList = res.content;
      })
    },
    //解绑
    unbinding(index,row){
      //弹出确认框
      // console.log(row.id);
      // console.log(row.bank);
      this.$confirm('此操作将解绑银行卡, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        unbindingCard(row.id,this.$store.state.user.userInfo.userId).then(()=>{
          this.$message({
            type: 'success',
            message: '解绑成功!'
          });
          location.reload();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style scoped>
.bind_card{
  max-width: 50%;
  margin-top: 50px;
  margin-left: 20%;
}
</style>
